<template>
  <div id="menu">
    <Menu active-name="1" :theme="themeName" width="auto" class="left-menu">
        <div class="layout-logo-left">
            <span @>VRfens</span>
        </div>
        <Menu-group title="内容管理">
          <Menu-item name="1">
            <Tooltip content="来" placement="right">
              <Icon type="ios-navigate" :size="iconSize"></Icon>
              <span class="layout-text">选项 1</span>
            </Tooltip>
          </Menu-item>
        </Menu-group>
        <Menu-group title="内容管理">
          <Menu-item name="2">
            <Tooltip content="爱" placement="right">
              <Icon type="ios-keypad" :size="iconSize"></Icon>
              <span class="layout-text">选项 2</span>
            </Tooltip>
          </Menu-item>
        </Menu-group>
        <Menu-group title="内容管理">
          <Menu-item name="3">
            <Tooltip content="我" placement="right">
              <Icon type="ios-analytics" :size="iconSize"></Icon>
              <span class="layout-text">选项 3</span>
            </Tooltip>
          </Menu-item>
        </Menu-group>
            <Menu-group title="内容管理">
            <Menu-item name="4">
            <div @click="changeTheme">
              <Tooltip content="吧" placement="right">
                  <Icon type="arrow-swap" :size="iconSize"></Icon>
                  <span class="layout-text">修改主题</span>
              </Tooltip>
            </div>
          </Menu-item>
        </Menu-group>
      </Menu>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'menu',
    data () {
      return {
        themeName: this.theme
      }
    },
    props: ['spanLeft', 'spanRight', 'theme'],
    computed: {
      iconSize () {
        return this.spanLeft === 5 ? 18 : 28
      }
    },
    methods: {
      changeTheme () {
        this.themeName === 'dark' ? this.themeName = 'light' : this.themeName = 'dark'
        this.$emit('changetheme', this.themeName)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  #menu{
      // border: 1px solid #d7dde4;
      height: 100%
      position: relative;
      // border-radius: 4px;
      overflow: hidden;
    z-index: 999
  }
  .layout-logo-left{
      width: 90%;
      height: 40px;
      background: #5b6270;
      border-radius: 3px;
      margin: 0 auto;
      padding: 5px 0
      text-align: center;
  }
  .layout-logo-left span{
      font-size: 28px;
      font-style: bold;
      color: #eee
      line-height: 28px;
  }
  .layout-hide-text .layout-text{
      display: none;
  }
  .ivu-menu .ivu-menu-dark .ivu-menu-vertical{
    background: #1c2438;
  }
  .left-menu{
    height: 1200px
  }

</style>
